/*
 * @Description: 
 * @Author: chh
 * @Date: 2020-12-31 15:50:27
 * @LastEditTime: 2021-03-30 16:40:52
 */
import './style.scss'
export class Stars {
    // el
     el = null
    // 星星列表
     starsArr = []
    // 星星数量
     len = 20
    // 是否达到最大值
     maxStar = false
     // 存储计时器
     storeTime = null
    // 构造函数
    constructor(el) {
        this.el = document.querySelector(el)
        // 初始化
        this.init()
    }
    init() {
      this.storeTime = setInterval(() => {
            this.pushPipe(this.createStars())
        }, 300)
    }
    // 星星创建函数
    createStars() {
        // 创建星星，如果已经达到星星数量，则复用星星节省性能
        let dom = null
        if (this.starsArr.length >= this.len) {
            this.maxStar = true
            dom = this.starsArr.shift()
        } else {
            dom = document.createElement('div')
        }
        // 设置星星属性
        dom.className = 'u-stars'
        dom.style.left = `${parseInt(String(Math.random() * 100))}vw`
        dom.style.top = `${parseInt(String(Math.random() * 50))}vh`
        dom.style.transform = `scale(${parseInt(String(Math.random() * 1.2)) + 0.3})`
        // 推入管道
        return dom
    }
    // 管道函数
    pushPipe(dom) {
        // 如果没有达到最大数量，则向页面中添加星星
        if (!this.maxStar) {
            this.el.appendChild(dom)
        }
        this.starsArr.push(dom)
    }
    stopStars () {
       clearInterval(this.storeTime)
    }
}
